<template>
  <div class="feedback-container">
    <div class="title">
      <div>站内消息</div>
      <SearchCmp
        style="margin: 10px 0;"
        v-if="searchCmpArray.length"
        :searchCmpArray="searchCmpArray"
        :searchForm="params"
        @onSubmit="onSubmit"
      />
    </div>
    <div class="content">
      <RuifoxTable
        :loading="tableLoading"
        :default-index="true"
        v-model:tableData="tableData"
        v-model:fieldList="fieldList"
      >
        <template #name='{element}'>
          <div class="img-title">
            <div class="img-box">
              <img class="icon" v-if="element.type != 1" :src="getAvatarUrl(element.type)" alt="">
              <img class="pic" v-else :src="element.url" alt="">
            </div>
            <span class="file-name">{{element.name}}</span>
          </div>
        </template>
        <template #options='{element}'>
          <div class="table-td-option">
            <el-button type="primary" size="small" class="unmover" link @click="handleDelete(element)" >删除</el-button>
            <el-button type="primary" size="small" class="unmover" link @click="handleReaded(element)" >标记已读</el-button>
          </div>
        </template>
      </RuifoxTable>

      <PaginationViewSimple
        :total="params.total"
        :pageSize="params.pageSize"
        :currentPage="params.currentPage"
        @currentChange="handleCurrentPageChange"
        @changeSize="handlePageSizeChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const fieldList = ref([
  {
    title: '标题',
    name: 'title',
  },
  {
    title: '内容',
    name: 'content',
  },
  {
    title: '发布时间',
    name: 'publishTime',
  },
  {
    title: '状态',
    name: 'status',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])

const params = ref({
  total: 0,
  pageSize: 30,
  currentPage: 1,
  keywords: null, //关键词
  status: null, //状态 0:未读 1:已读
})
const tableData = ref([])
if(process.env.NODE_ENV === 'development') {
  tableData.value = [
    {
      title: '标题1',
      content: '内容1',
      publishTime: '2023-08-08',
      status: 0, // 0:未读 1:已读
    },
    {
      title: '标题2',
      content: '内容2',
      publishTime: '2023-01-08',
      status: 1,
    },
  ]
  params.value.total = tableData.value.length
}
const tableLoading = ref(false)
const hanldeGetTableData = async () => {
  // tableLoading.value = true
  // let res = await getMessageFeedback(params.value).finally(()=>{
  //   tableLoading.value = false
  // })
  // tableData.value = res.data
  // params.value.total = res.total
  1
}
hanldeGetTableData()

const onSubmit = () => {
  params.value.currentPage = 1
  hanldeGetTableData()
}
const handleCurrentPageChange = (page) => {
  params.value.currentPage = page
  hanldeGetTableData()
}
const handlePageSizeChange = (size) => {
  params.value.currentPage = 1
  params.value.pageSize = size
  hanldeGetTableData()
}
const showStatusOptions = ref([
  { label: '全部', value: null },
  { label: '未读', value: 0 },
  { label: '已读', value: 1 },
])
const searchCmpArray = ref([
  { label: '智能匹配', key: 'keywords' },
  { label: '状态', key: 'status', form_type: 'select', options: showStatusOptions.value },
])

const handleDelete = (data) => {
  console.log(data)
}
const handleReaded = (data) => {
  console.log(data)
}
</script>
<style scoped lang='scss'>
.feedback-container{
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  padding: 15px;
  background-color: #FFFFFF;
  min-width: 1280px;
  .title{
    font-size: 18px;
    font-weight: 600;
  }
}
</style>